<template>
	<view class="register-container">
		<!-- 页面标题 -->
		<view class="register-title">
			<view>短信登录</view>
		</view>

		<!-- 手机号输入 -->
		<view class="input-item">
			<view class="input-icon">
				<wd-icon name="mobile" size="22px" class="input-icon"></wd-icon>
			</view>
			<wd-input 
				v-model="form.phone" 
				placeholder="请输入手机号" 
				type="number" 
				:maxlength="11" 
				input-align="left"
				class="input" 
				@input="onPhoneInput" 
				label="手机号" 
				label-width="140rpx"
			></wd-input>
		</view>

		<!-- 验证码输入 + 获取按钮 -->
		<view class="input-item code-item">
			<view class="input-icon">
				<wd-icon name="secured" size="22px"></wd-icon>
			</view>
			<wd-input 
				v-model="form.code" 
				placeholder="请输入验证码" 
				type="number" 
				:maxlength="6" 
				input-align="left"
				class="input flex-1" 
				label="验证码" 
				label-width="140rpx"
			></wd-input>
			<wd-button 
				size="small" 
				type="primary" 
				plain 
				:disabled="!canSendCode" 
				class="btn-code" 
				@click="sendCode"
			>
				{{ codeBtnText }}
			</wd-button>
		</view>

		<!-- 登录按钮 -->
		<view class="btn-register">
			<wd-button 
				type="primary" 
				block 
				:loading="loading" 
				:disabled="!canRegister" 
				@click="login"
			>
				登录
			</wd-button>
		</view>

		<!-- 切换登录/注册方式 -->
		<view class="login-link">
			<text class="link" @click="accountPage">账号登录</text>
			<text class="link" @click="registerPage">注册</text>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref, computed, onBeforeUnmount } from 'vue'
	import { sendCode as sendCodeApi, loginByPhoneCode as loginByPhoneCodeApi } from "@/api/user"
	import { useRouter } from 'uni-mini-router'

	// 路由实例
	const router = useRouter();
	const accountPage=()=>{
		router.replaceAll({
			name: "account_login"
		})
	}
	const registerPage=()=>{
		router.replaceAll({
			name: "register"
		})
	}


	// 表单数据（仅保留页面中实际使用的字段）
	const form = reactive({
		phone: '',
		code: ''
	})

	// 响应式变量（仅保留必要项）
	const loading = ref(false)
	const codeBtnText = ref('获取验证码')
	const timer = ref(null)
	const countdown = ref(60)
	const isCounting = ref(false)

	// 计算属性（适配短信登录场景）
	const canSendCode = computed(() => {
		return /^1[3-9]\d{9}$/.test(form.phone) && !isCounting.value
	})

	const canRegister = computed(() => {
		return /^1[3-9]\d{9}$/.test(form.phone) &&
			form.code.length === 6 &&
			!loading.value
	})

	// 手机号输入处理
	const onPhoneInput = () => {
		// 可添加手机号格式化等逻辑
	}

	// 发送验证码
	const sendCode = () => {
		if (!canSendCode.value) {
			uni.showToast({ title: '手机号格式错误', icon: 'none' })
			return
		}

		uni.showLoading({ title: '发送中...' })
		setTimeout(() => {
			uni.hideLoading()
			sendCodeApi({
				phone: form.phone,  // 修复拼写错误
				scene: "mine"      // 适配登录场景
			}).then((res) => {
				console.log("验证码发送结果:", res)
			})

			uni.showToast({ title: '验证码已发送', icon: 'success' })
			startCountdown()
		}, 1500)
	}

	// 验证码倒计时
	const startCountdown = () => {
		isCounting.value = true
		codeBtnText.value = `${countdown.value}秒后重发`

		timer.value = setInterval(() => {
			countdown.value--
			codeBtnText.value = `${countdown.value}秒后重发`

			if (countdown.value <= 0) {
				clearInterval(timer.value)
				isCounting.value = false
				codeBtnText.value = '获取验证码'
				countdown.value = 60
			}
		}, 1000)
	}

	// 登录提交
	const login = () => {
		if (loading.value) return

		loading.value = true
		// 实际项目中替换为真实登录接口调用
		loginByPhoneCodeApi({
			phone: form.phone,
			code: form.code
		}).then((res) => {
			if (res.code === 200) {
				uni.showToast({ title: '登录成功', icon: 'success' })
				// router.replaceAll({ name: "account_login" })
				// uni.reLaunch({
				// 	url: "/pages/tabPage/mine"
				// })
				uni.setStorage({
					key: 'userRole',
					data: 'doctor',
					success: function () {
						uni.reLaunch({
					url: "/pages/tabPage/mine"
				})
				
					}
				});
				
			} else {
				uni.showToast({ title: res.message || '登录失败', icon: 'none' })
			}
		}).catch((err) => {
			uni.showToast({ title: '登录失败', icon: 'none' })
			console.error(err)
		}).finally(() => {
			loading.value = false
		})
	}

	// 页面卸载前清理定时器
	onBeforeUnmount(() => {
		if (timer.value) {
			clearInterval(timer.value)
		}
	})
</script>

<style lang="less">
	@import '@/static/styles/colors.less';
	@import '@/static/styles/constants.less';

	.register-container {
		padding: 80rpx 40rpx 0;
		background-color: #fff;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.register-title {
		font-size: 48rpx;
		font-weight: 700;
		color: #333;
		margin-bottom: 80rpx;
		text-align: center;
	}

	.input-item {
		border-bottom: 1px solid #e5e5e5;
		padding: 15rpx 0;
		margin-bottom: 10rpx;
		display: flex;

		.input-icon {
			flex: 0 0 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.code-item {
		display: flex;
		align-items: center;
		gap: 0rpx;
	}

	:deep(.wd-input.is-cell) {
		padding-left: 0rpx !important;
	}

	:deep(.wd-cell) {
		padding-left: 0rpx !important;
	}

	.wd-input {
		&::v-deep .wd-input__control {
			font-size: 30rpx;
			color: #333;
			height: 80rpx;
			line-height: 80rpx;
		}

		&::v-deep .wd-input__label {
			font-size: 30rpx;
			color: #333;
			text-align: left;
		}
	}

	.btn-code {
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		flex-shrink: 0;
	}

	.btn-register {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		border-radius: 16rpx;
		margin: 40rpx 0;
	}

	.login-link {
		text-align: center;
		font-size: 28rpx;
		color: #666;
		display: flex;
		justify-content: space-between;
	}

	.link {
		color: #007aff;
	}
</style>